<template>
  <div class="banner">
    <img src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg"
         class="banner-img">
    <div class="banner-info">
      <div class="banner-title">故宫(AAAAA景区)</div>
      <div class="banner-number "><span class="iconfont arrow-icon banner-icon">&#xe6a5;</span>39</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailBanner"
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/varible.less";
  @import "~styles/mixins.less";

  .banner {
    .rel;
    overflow: hidden;
    height:0;
    padding-bottom: 55%;
    .banner-img{
      .w100;
    }
    .banner-info{
      background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8));
      .abs;
      color:#fff;
      .flex;
      left:0;
      right:0;
      bottom:0;
      line-height: 0.6rem;
      .banner-title{
        flex:1;
        .font-s(0.32rem);
        padding:0 0.2rem;
      }
      .banner-number{
        margin-top: 0.14rem;
        padding:0 0.4rem;
        line-height: 0.4rem;
        height:0.32rem;
        border-radius: 0.2rem;
        background: rgba(0,0,0,0.8);
        .font-s(0.24rem);
        .banner-icon{
          padding-right:0.2rem;
          .font-s(0.24rem);
        }
      }
    }
  }
</style>
